<template>
    <div class="player">
        <!-- <video-player  class="vjs-custom-skin"
                     ref="videoPlayer"
                     :options="playerOptions"
                     :playsinline="true"
                     @play="onPlayerPlay($event)"
                     @pause="onPlayerPause($event)"
                     @ended="onPlayerEnded($event)"
                     @loadeddata="onPlayerLoadeddata($event)"
                     @waiting="onPlayerWaiting($event)"
                     @playing="onPlayerPlaying($event)"
                     @timeupdate="onPlayerTimeupdate($event)"
                     @canplay="onPlayerCanplay($event)"
                     @canplaythrough="onPlayerCanplaythrough($event)"
                     @ready="playerReadied"
                     @statechanged="playerStateChanged($event)">
        </video-player> -->
        <!-- <video src="http://sxzd365.com:9060/uploads/shop/file49819-1512034496766.mp4" autoplay ></video> -->
        <!-- <img src="../img/33.jpg" alt=""> -->
        <video poster='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516874998976&di=097200de670dd806e9a9016251be2eab&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1291397622%2C1318481737%26fm%3D214%26gp%3D0.jpg' controls autoplay id='vdo'>
            <source src="http://sxzd365.com:9060/uploads/shop/file49819-1512034496766.mp4" type='video/mp4'>
            您的浏览器不支持 video 标签。
        </video>
      
        
    </div>
</template>

<script>
  export default {
    data() {
      return {
        // videojs options
        playerOptions: {
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }],
          poster: "http://covteam.u.qiniudn.com/poster.png",
        }
      }
    },
    mounted() {
      // console.log('this is current player instance object', this.player)
      setTimeout(() => {
        // console.log('dynamic change options', this.player)
        // this.player.muted(false)
      }, 2000)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      onPlayerEnded(player) {
        // console.log('player ended!', player)
      },
      onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        // console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
        // seek to 10s
        player.currentTime(10)
        // console.log('example 01: the player is readied', player)
      }
    },
    created() {
        var vdo = $('video');
        console.log(vdo.width());
        console.log(vdo.height());
    }
  }
</script>
<style lang="scss" scoped>
    .player {
        width: 100%;
        height: 100%;
        /* // position: relative; */
        /* display: flex; */
        .video-player {
            width: 100%;
            height: 100%;
            video {
                width: 100px;
                height: 100%;
                transform:rotate(90deg);
                -ms-transform:rotate(90deg); /* Internet Explorer */
                -moz-transform:rotate(90deg); /* Firefox */
                -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
                -o-transform:rotate(90deg); /* Opera */
            }
        }
        video {
            margin: auto;
            width: 100%;
            height: 100%;
            transform:rotate(90deg);
            object-fit: none;
        }
    }
</style>